;
(function(window) {

  const hlStep = {
    template: `<div class="hl-step-container"
         :style="style"
         :class="[
          direction ? 'is-' + direction : '',
          isLast && !space && !isCenter && 'is-flex',
          isCenter && !isVertical && 'is-center'
         ]"
    >

      <div class="hl-step__head">
        <div class="hl-step__line"
             :class="[
              currentStatus ? 'is-' + currentStatus : '',
              {'is-disabled': $parent.onStatusIndex < index && currentStatus == 'wait' }
             ]"
             :style="isLast ? '' : {marginRight: $parent.stepOffset + 'px'} "
        >
        </div>

        <div class="hl-step__icon-container" :class="[currentStatus ? 'is-' + currentStatus : '']">
          <div class="hl-step__icon">
            <div class="hl-step__icon-inner" v-if=" currentStatus !== 'success' ">{{index + 1}}</div>
            <div class="hl-step__icon-success icon-right-nav-Selected" v-if=" currentStatus === 'success' "></div>
          </div>
        </div>
      </div>

      <div class="hl-step__main">
        <div class="hl-step__title" ref="title" :class="[currentStatus ? 'is-' + currentStatus : '']">
          <slot name="title">{{title}}</slot>
        </div>
      </div>

    </div>`,
    data() {
      return {
        index: -1,
        internalStatus: ''
      }
    },
    props:{
      title:String,
      status: String
    },
    computed:{
      currentStatus(){
        return this.status || this.internalStatus
      },
      onStatusIndex(){
        return this.$parent.onStatusIndex
      },
      isCenter(){
        return this.$parent.alignCenter
      },
      isVertical(){
        return this.$parent.direction === 'vertical'
      },
      isSimple(){
        return this.$parent.simple
      },
      isLast(){
        const parent = this.$parent
        return parent.steps[parent.steps.length - 1] === this
      },
      direction(){
        return this.$parent.direction
      },
      stepsCount(){
        return this.$parent.steps.length
      },
      space(){
        const { isSimple, $parent:{space} } = this
        return isSimple ? '' : space
      },
      style(){
        const style = {}
        const parent = this.$parent
        const len = parent.steps.length

        const space = (typeof this.space === 'number' ? this.space + 'px' : this.space ? this.space : 100/ (len - (this.isCenter ? 0:1)) + '%' )

        style.flexBasis = space
        if(this.isVertical) return style
        if(this.isLast){
          style.maxWidth = 100 / this.stepsCount + '%'
        }else{
          style.marginRight = -this.$parent.stepOffset + 'px'
        }

        return style
      }
    },
    beforeCreate(){
      this.$parent.steps.push(this)
    },
    beforeDestroy(){
      const steps = this.$parent.steps
      const index = steps.indexOf(this)

      if(index >= 0) {
        steps.splice(index,1)
      }
    },
    created(){

    },
    mounted(){
      const unwatch = this.$watch('index', val => {
        this.$watch('$parent.active', this.updateStatus, { immediate: true });
        this.$watch('$parent.processStatus', () => {
          const activeIndex = this.$parent.active;

          this.updateStatus(activeIndex);
        }, { immediate: true });

        unwatch();
      });
    },
    methods: {
      updateStatus(val){
        const prevChild = this.$parent.$children[this.index - 1]

        if(val == this.index){
          this.internalStatus = 'on'
          this.$parent.onStatusIndex = this.index
        }else{
          this.internalStatus = 'wait'
        }
      },
    }

  }

  Vue.component('hl-step', hlStep)

}(window))
